<template>
	<div>
		<form class="form-cont" v-if="!userComponts && !otherChooseIs">
			<div class="form-title">
				<p>基本信息</p>
			</div>

			<!--Vux ui组件-->
			<div ref="ipt" v-if="!stateX" id="safeMeetingTime">
				<datetime title="时间：" v-model="list.meetingTime" tips="时间"  value-text-align="left"></datetime>
			</div>
			<div ref="ipt" v-if="stateX" id="safeMeeting">
				<x-input title="时间：" tips="时间" v-model="list.meetingTime"  readonly></x-input>
			</div>
			<group id="safeMeeting">
				<div isrequired="isrequired" class="ipt MeetingStyle" tips ="地点">
				<x-input title=" 地点 : " placeholder="地点(必填)"  v-model="list.meetingSite" :show-clear="false"></x-input>
				</div>
				<div @click="!stateX && chooseemcc()" isrequired="isrequired" class="ipt" tips ="主持人">
					<x-input title="主持人 : " placeholder="主持人(必填)"  v-model="emccName" :show-clear="false"></x-input>
				</div>
				
				<div isrequired="isrequired" class="ipt" tips ="记录人">
					<x-input title="记录人 : " readonly  :value=" id  ? list.rememberName: employeeName "></x-input>
				</div>
			</group>




			<!--<div class="form-baseinput">
				<div class="form-group formline">
					<label>时间：</label>
					<input type="date" name="title" v-model="list.meetingTime" required tips="时间" placeholder="时间" class="form-control">
				</div>
				

				<div class="form-group formline">
					<label>地点：</label>
					<input type="text" name="title" v-model="list.meetingSite" required tips="地点" class="form-control" placeholder="地点(必填)">
				</div>
					

				<div class="form-group formline" @click="chooseemcc">
					<label>主持人：</label>
					<input type="text" name="title" v-model="emccName" required tips="主持人" class="form-control" placeholder="主持人(必填)" ref="emcc">
					<span class="ion ion-chevron-down"></span>
				</div>
				<div class="form-basetop clearFix">
					<div class="form-half">
						<p>记录人：</p>
						<span v-if='id'>{{list.rememberName}}</span>
						<span v-else>{{employeeName}}</span>
					</div>
				</div>
			</div>-->

			<div class="form-title clearFix">
				<p>参加人员</p>
				<i class="ion ion-plus-circled fl_right" @click="showOrHide"  v-if="$route.query.state != 1 && $route.query.state != 2"></i>
			</div>
			
			
			<div class="form-group">
				<table width="100%" border="0" class="form-table">
					<thead>
						<tr>
							<th width="22%">人员姓名</th>
							<th width="65%">分享</th>
							<th v-if="$route.query.state != 1 && $route.query.state != 2">操作</th>
						</tr>
					</thead>
					<tbody>
						<tr v-for="(item,index) in userListArr" :id="item.employeeSn">
							<td>{{item.employeeName}}</td>
							<td><textarea cols="15" rows="3" v-model="item.shartContent"></textarea></td>
							<td v-if="$route.query.state != 1 && $route.query.state != 2"><i class="ion ion-ios-close" @click="deltable($event,index)"></i></td>
						</tr>
					</tbody>
				</table>
			</div>


			<div class="form-textarea">
	       		<div class="form-title clearFix">
					<p>上次会议整改行动回顾（如有）</p>
				</div>
				<div class="form-group">
					<textarea name="title" rows="3" v-model="list.lastMeeting" class="form-control" placeholder="回顾经过"></textarea>
				</div>
				
				<div class="form-title clearFix">
					<p>存在的问题及改进计划</p>
				</div>
				<div class="form-group">
					<textarea name="title" rows="3" v-model="list.meetingPlan" required tips="存在的问题及改进计划" class="form-control" placeholder="问题及改进计划(必填)"></textarea>
				</div>
				
				<div class="form-title clearFix">
					<p>案例分析/险性事故分享</p>
				</div>
				<div class="form-group">
					<textarea name="title" rows="3" v-model="list.meetingComment" required tips="案例分析/险性事故分享" class="form-control" placeholder="分享(必填)"></textarea>
				</div>
				<div class="form-group" id="addaccident" @click="otherChoose"  v-if="$route.query.state != 1 && $route.query.state != 2">
					<label class="addalert"><i class="ion ion-android-add fontcompany"></i>点此添加分享的安全圈或事故Alert（如有）</label>
				</div>
			</div>


			<div class="safeParent" v-if="shareIdsName.length != 0">
				<p>安全圈：</p>
				<ul>
					<li v-for="(item,index) in shareIdsName" :id="item.id">
						{{item.shareTitle}} <i class="ion ion-ios-close" @click="delsafe($event,index)"  v-if="$route.query.state != 1 && $route.query.state != 2"></i>
					</li>
				</ul>
			</div>
			<div class="alertParent" v-if="alertIdsName.length != 0">
				<p>事故Alert：</p>
				<ul>
					<li v-for="item in alertIdsName" :id="item.id">
						{{item.accidentNum}} {{item.accidentDate}} {{item.country}} {{item.city}}  {{item.bpAccidentType}} <i class="ion ion-ios-close" @click="delalert($event,item)"  v-if="$route.query.state != 1 && $route.query.state != 2"></i>
					</li>
				</ul>
			</div>

			<div class="form-title clearFix">
				<p>相关照片</p>
			</div>
			<div class="form-group uploadimage" id="uploadimage">
				<ul>
					<li v-for="(img,index) in imgs">
						<img :src="img" @click="previewImg(img)"/>
						<i class="ion ion-ios-close" v-if="$route.query.state != 1 && $route.query.state != 2" @click.stop.prevent="delImg(img,index)"></i>
					</li>
					<li>
						<a class="companypic" id="chooseImages" @click="getSig()" v-if="$route.query.state != 1 && $route.query.state != 2 && imgs.length < 6">
			        		<i class="ion ion-android-add fontcompany"></i>
			        		<!-- <span class="bluecolor block">点击上传照片</span> -->
			        	</a>
					</li>		
				</ul>
	        	
       		</div>


       		<div class="savebtn" v-if="$route.query.state != 1 && $route.query.state != 2">
	       		<button type="button" class="" @click="savenm(0)">保存</button>
	       		<button type="button" class="" @click="savenm(1)">保存并提交</button>
	   		</div>
		</form>
		<choose-userlist v-if="userComponts" :findType="typeFind"></choose-userlist>
		<accident-safe v-if="otherChooseIs"></accident-safe>
		<toast v-if="toastShow" :message="tipMessage"></toast>
		<dialog-box :message="dialogMessage" v-if="dialogShow" @close-dialog="closeDialog"
                @cancle-dialog="cancleDialog"></dialog-box>
		<transition name="slide">
	      <tips v-show="tipsShow" :tips="tipsMessage"></tips>
	    </transition>
	</div>
</template>


<script type="text/javascript">

	import { Datetime, Group, XInput } from 'vux'

	import wx from 'weixin-js-sdk'

	import jssdk from '../../assets/js/jssdk/wxJSSDK'

	import safeUrl from '../../assets/js/insterface'

	import chooseUserlist from '../../components/safereport/userList.vue'

	import accidentSafe from '../../components/safereport/accidentSafe.vue'

	import vaild from '../../assets/js/vaild_form'

	import http from '../../assets/js/http_mixin'

	export default {
		data () {
			return {
				stateX:true,

				typeFind:'',

				isSubmit:true,

				isSubmitAll:true,

				dialogMessage:'请确保已将主持人或记录人也选作参加会议人员，否则会影响分享内容的加分噢！',

				id:null,
				
				userComponts:false,

				otherChooseIs:false,

				employeeName:'',

				chooseOnly:'',

				emccName:'',

				tipMessage:'',

				list:{
					id:'',
					depId:'',
					empNo:'',
					meetingTime:'',
					meetingSite:'',
					emceeNo:'',    //主持人
					rememberNo:'', //记录人
					meetingEmpVO:'',  //会议参加人  [{empNo:'',shartContent:''}]
					shareIds:'',
					alertIds:'',
					
					meetingImg:'', //图片
					lastMeeting:'',
					meetingComment:'',
					meetingPlan:'',
					state:''
				},

				shareIdsName:[],
				alertIdsName:[],

				userListArr:[],
				employeeArr:[],

				imgs:[],
				missImgs:[],

				idx:0,
				idx2:0
			}
		},
		mixins:[jssdk, http, vaild],
		components: {
			chooseUserlist,
			accidentSafe,
			Group,
			XInput,
			Datetime
		},
		mounted() {
			document.title="会议纪要";
			this.list.empNo = this.$route.query.empNo;
			this.id=this.$route.query.id;
			this.selectData();
			this.init();
			this.stateX = this.$route.query.state ? true : false;
			
		},
		methods: {
			closeDialog(){
				this.dialogShow = false;
				this.isSubmit = true;
				this.submit();
			},
			cancleDialog(){
				this.dialogShow = false;
				this.isSubmit = false;
			},
			selectData(callback) {
				// debugger;
				// if(!this.$route.query.state){
					this.$http.post(safeUrl.smSelectData,{rememberNo:this.list.empNo},{emulateJSON: true})
					.then((response) =>{
						// debugger;
						const responseData = response.data.resultMap.employee;

						const d = new Date();
						var months = d.getMonth() + 1;
						var days =  d.getDate();
						if(months < 10){
							months = '0' + months;
						}
						if(days < 10){
							days = '0' + days;
						}
						this.list.meetingTime = d.getFullYear()+"-"+months+"-"+days;
						// const d = new Date();
						// this.list.meetingTime = d.getFullYear()+"-"+(d.getMonth()+1)+"-"+d.getDate();
						
						this.employeeName = responseData.employeeName;
						this.list.rememberNo = responseData.employeeSn;
						this.list.depId = responseData.depId;
						this.enterData();
						console.log(responseData);
						
					})
					.then(function(response){
						console.log(response)
					})
				// }
			},
			enterData() {
				console.log(this.$route.query.state);
				if(this.$route.query.state){
					this.getData();
					var form = document.forms[0]; 
					for ( var i = 0; i < form.length; i++) { 
						var element = form.elements[i]; 
						element.disabled = true; 
					} 
				}else if(this.$route.query.state == 0){
					this.getData();
					
				}
			},
			getData() {
				this.$http.post(safeUrl.smDetail,{meetingId:this.$route.query.id},{emulateJSON: true})
				.then((response) =>{
					// debugger;
					var editTextareaData = response.data.jsonModelView.model;
					
					var editEasyData = editTextareaData.smVo;

					this.shareIdsName = editTextareaData.shareData;
					this.alertIdsName = editTextareaData.alertData;
					
					this.list.id = editEasyData.id;
					this.list.depId = editEasyData.depId;
					this.list.emceeNo = editEasyData.emceeNo;
					this.list.meetingTime = editEasyData.meetingTime;
					this.list.meetingSite = editEasyData.meetingSite;
					this.list.lastMeeting = editEasyData.lastMeeting;
					this.list.meetingComment = editEasyData.meetingComment;
					this.list.meetingPlan = editEasyData.meetingPlan;
					this.list.rememberName=editEasyData.rememberName;

					
					//参加会议人员处理
					for(var j=0; j<editTextareaData.meetingEmpArr.length; j++){
						editTextareaData.meetingEmpArr[j].employeeSn = editTextareaData.meetingEmpArr[j].empNo;
						editTextareaData.meetingEmpArr[j].employeeName = editTextareaData.meetingEmpArr[j].empName;
					}
					this.userListArr = editTextareaData.meetingEmpArr;
					

					this.emccName = editEasyData.emccName;
					// debugger;
					if(editEasyData.meetingImg != "" && editEasyData.meetingImg != null){
						const imgArr = editEasyData.meetingImg.split(",")
						for(var j=0; j<imgArr.length; j++){
							this.missImgs.push(imgArr[j]);
						}
						this.imgs = imgArr;
					}
					// debugger;
					var vue = this;
					setTimeout(function(){
						if(vue.$route.query.state != 0){
							var form = document.forms[0]; 
							for ( var i = 0; i < form.length; i++) { 
								var element = form.elements[i]; 
								element.disabled = true; 
							} 
						}
					},10);
					

					console.log('修改的时候:' + JSON.stringify(response.data.jsonModelView))
				})
				.then(function(response){
					console.log(response)
				})
			},
			getSig() {
				var vue = this;
				var chooseImageID = [];
				var imageId = document.getElementById('chooseImages');
				this.imageApi({
					chooseImage:{
						count:6 - vue.imgs.length,
						success:function(res){
							chooseImageID = res.localIds;
							if(chooseImageID[0].toString().indexOf("wxLocalResource") != -1){
								vue.getLocalImg(chooseImageID);    
							}else{
								for(var i=0; i<chooseImageID.length; i++){
									vue.imgs.push(chooseImageID[i]);
								}
							} 
							// vue.imglength = vue.imgs.length;
							vue.syncUpload(chooseImageID);
							console.log("gongsi------------" + chooseImageID);
						}
					}
				})
			},
			getLocalImg(eve){
		        var _this = this;
		        _this.imageApi({
					getLocalImgData:{
						localId: eve[_this.idx2].toString(),
						success: function (res) {
							_this.idx2++;
							_this.imgs.push(res.localData.toString());
							if (_this.idx2 < eve.length) {
								_this.getLocalImg(eve);   
							} else {
								_this.idx2 = 0;
							}
						}
					}
		        });    
		    },
			previewImg(img) {
				var vue = this;
				this.imageApi({
					previewImage:{
						current:img,
						urls:vue.imgs
					}
				})
			},
			syncUpload (localIds){
				var vue = this;
				this.imageApi({
					uploadImage:{
						localId:localIds[vue.idx].toString(),
						success:function(res){
							vue.idx++;
							vue.missImgs.push(res.serverId);
							if(vue.idx<localIds.length){
								vue.syncUpload(localIds);
							}else{
								vue.idx = 0;
							}
						}
					}
				})
			},
			savenm(e) {
				if(e == "1"){
					var oInput = document.forms[0].elements;
					var xDiv = document.getElementsByClassName('ipt') //获取Xinput组件父级节点
					if(!this.vaildxIpt(xDiv)){                        // 调用vaildxInpt方法判断
						return false;
					}

			        if (!this.vaildForm(oInput)) {
			          return false
			        }
					
			        this.dialogShow = true;
			        this.isSubmit = false;
		        }else{
		        	this.isSubmit = true;
		        }

				var vue = this;
				// console.log('看看这个数组里面有啥：' + JSON.stringify(this.userListArr));
				this.list.state = e;
				this.list.meetingImg = this.missImgs.join(",");
				var tdArr = document.querySelectorAll('tbody tr');
				var meetingArr = [];
				for(var i=0; i<tdArr.length; i++){
					meetingArr.push({'empNo':tdArr[i].getAttribute("id"),'shartContent':tdArr[i].childNodes[2].childNodes[0].value});
				}
				this.list.meetingEmpVO = '';
				for(var j=0; j<meetingArr.length; j++){
					this.list.meetingEmpVO += JSON.stringify(meetingArr[j]) + "&";
				}
				// this.list.meetingEmpVO = JSON.stringify(meetingArr.join());
				//保存操作
				// debugger;
				if(this.shareIdsName.length > 0){
					var liststring = [];
					for(var i=0; i<this.shareIdsName.length; i++){
						liststring.push(this.shareIdsName[i].id);
					}
					this.list.shareIds = liststring.join(",");
				}

				if(this.alertIdsName.length > 0){
					var liststring = [];
					for(var j=0; j<this.alertIdsName.length; j++){
						liststring.push(this.alertIdsName[j].id);
					}
					this.list.alertIds = liststring.join(",");
				}
                this.submit();
				
				
			},
			submit(){
				if(this.isSubmitAll && this.isSubmit){
					this.isSubmitAll = false;
					setTimeout(function (){
						this.isSubmitAll= true;
					},2000);
					
					var vue = this;
                	this.getInfo({
						url:safeUrl.smSendData,
						param:this.list,
						success:function(response){
							vue.toastShow = true;
							vue.tipMessage = response.data.msg;
							this.sendRemindng()
							console.log(response.data);
						},
						fail:function(response){
						}
					});
                }
			},
			sendRemindng() {
				let params = {
					empNum:this.$route.query.empNo,
					taskName:this.$route.query.typeName
				}
				const vue = this
				this.getInfo({
					url:safeUrl.taskReminding,
					param:params,
					success:function(response) {
						setTimeout(function(){
							vue.toastShow = false;
							window.history.go(-1);
						},1500);
					},
					fail:function() {
						setTimeout(function(){
							vue.toastShow = false;
							window.history.go(-1);
						},1500);
					}
				})
			},
			delImg(img,i) {
				this.missImgs.splice(i,1);
				this.imgs.splice(i,1);
			},
			showOrHide() {
				this.typeFind = '';
				this.chooseOnly = 1;
				this.userComponts = true;
			},
			chooseemcc() {
				this.typeFind = '1';
				this.chooseOnly = 0;
				this.userComponts = true;
			},
			otherChoose() {
				this.otherChooseIs = true;
			},
			deltable(e, item) {
				this.userListArr.splice(item,1);
			},
			delsafe(e, item) {
				this.shareIdsName.splice(item,1);
			},
			delalert(e, item) {
				this.alertIdsName.splice(item,1);
			}
		}
	}
</script>